<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<dom-module id="shop-customer-service">
    <template>
        <style include="shop-common-styles">
            :host{
                padding:10px;
                display: block;
            }
            paper-button{
                background-color: green;
                margin: 0px;
                text-align: center;
                width: 100%;
                color: #fff;
            }
            paper-button a{
                
                text-decoration: none;
            }
        </style>
        <plugin-xhr id="xhr_open_page" url="[[app.apiHost]]/wx.app.call?name=navigateTo"></plugin-xhr>
        <plugin-xhr id="xhr_cs" url="[[app.apiHost]]/app.cs.get?app_id=[[app.appId]]" response="{{cs}}"></plugin-xhr>
        <plugin-content-view visible="{{visible}}" contents="{{layout.customer_service_top}}" width="[[pageWidth]]"></plugin-content-view>
        <header>
            <h1>客服</h1>
            <span>任何问题欢迎咨询</span>
        </header>
        <template is="dom-if" if="[[_and(cs.result.phone_enabled,cs.result.phone)]]">
            <p>
                <a href="tel:[[cs.result.phone]]"><paper-button>客服电话：[[cs.result.phone]]</paper-button></a>
            </p>
        </template>
        <template is="dom-if" if="[[_and(cs.result.location_enabled,cs.result.location)]]">
            <p>门店地址：[[cs.result.location.address]]</p>
            <plugin-location-view location="[[cs.result.location]]" allow-open></plugin-location-view>
            <p style="text-align: center">点击地图进行导航</p>
        </template>
        <paper-button on-click="_openChat">在线客服</paper-button>
        <plugin-content-view visible="{{visible}}" contents="{{layout.customer_service_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    </template>

    <script>
        class ShopCustomerService extends PluginElement {

            static get is() {
                return 'shop-customer-service';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            ready(){
                super.ready();
                let dom = this;
                app.addEventListener("reload",function(e){
                    if(app.page=="customer-service"){
                        dom._visibleChanged(true);
                    }
                });
            }
            _visibleChanged(visible) {
                if(visible){
                    this.$.xhr_cs.get();
                }
                app.$.customerService.style.display = visible?"none":"flex";
            }
            _openChat(e){
                this.$.xhr_open_page.setBody({url:"/pages/cs/cs"}).post();
            }
        }

        customElements.define(ShopCustomerService.is, ShopCustomerService);

    </script>

</dom-module>
